<template>
  <div class="produce-list-create">
    <createTop firstMenu="商品管理" secondMenu="商品列表" :title="pageName"></createTop>

    <el-card shadow="always" v-loading="loading">
      <div class="content">
        <div class="se">
          <div class="content-title">名称 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" v-model="goodsName" placeholder="请输入名称"></el-input>
        </div>
        <div class="se">
          <div class="content-title">编号</div>
          <el-input :style="{'width':'350px'}" disabled v-model="id" placeholder="商品编号"></el-input>
        </div>
      </div>

      <div class="content">
        <div class="se">
            <div class="content-title">分类 <span class="red-icon">※</span></div>
            <el-select :style="{'width':'350px'}" class="right-margin" clearable size="small" v-model="category" placeholder="选择出库类型">
              <el-option v-for="item in categorys" :key="item.id" :label="item.class_name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="se">
            <div class="content-title">单位 <span class="red-icon">※</span></div>
            <el-input :style="{'width':'350px'}" align="left" v-model="unit" placeholder="请输入编号"></el-input>
          </div>
      </div>

      <div class="content">
        <div class="se">
          <div class="content-title">型号 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" align="left" v-model="model" placeholder="请输入编号"></el-input>
        </div>
        <div class="se">
          <div class="content-title">单价 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" v-model="price" :rows="5" placeholder="请输入单价"></el-input>
        </div>
      </div>

      <div class="content">
        <div class="se">
          <div class="content-title">状态 <span class="red-icon">※</span></div>
          <el-radio-group class="radio" v-model="status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </div>
      </div>
      <saveBtn @confirm="confirm"></saveBtn>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import { Watch } from 'vue-property-decorator';
import AjaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class ProduceListCreate extends Vue {
  pageName: string = '';
  secondMenu: string = '';
  createRes!: ajaxResquest;

  unit: string = '';
  id: any = '';
  goodsName: string = '';
  model: string = '';
  price: string = '';
  status: number = 1;

  categorys: any[] = [];
  category: string = '';
  categoryRes!: AjaxResquest;

  loading: boolean = false;
  checkList: any[] = [];
  infoRes!: ajaxResquest;
  mounted() {
    this.categoryRes = new AjaxResquest('/goods/getClassList');
    this.infoRes = new ajaxResquest('/goods/getGoodsInfo');
    this.getCategory();
    if (this.$route.query.edit) {
      this.pageName = '编辑商品';
      this.id = this.$route.query.id;
      this.getInfo();
    } else {
      this.pageName = '新增商品';
    }
    this.createRes = new ajaxResquest('/goods/getGoodsToDo');
  }
  getCategory() {
    this.categoryRes.getFunction().then((res: any) => {
      this.categorys = res.data.data.types;
    });
  }
  getInfo(): void {
    this.infoRes.getFunction({ goodsId: this.id }).then((res: any) => {
      if (res.data.code === 1) {
        let data = res.data.data.types.goods;
        this.id = data.number;
        this.goodsName = data.goods_name;
        this.model = data.model;
        this.price = data.price;
        this.status = data.status;
        this.unit = data.unit;
        this.category = data.class_id;
      }
    });
  }
  confirm(): void {
    let data: any = {
      goodsName: this.goodsName,
      model: this.model,
      price: this.price,
      unit: this.unit,
      status: this.status,
      classId: this.category
    };
    if (this.$route.query.id) {
      data = { ...data, goodsId: this.$route.query.id };
    }
    this.createRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.$to('produceList');
      }
    });
  }
}
</script>
<style lang="less">
.produce-list-create {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  text-align: left;
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .radio {
    margin-top: 10px;
  }
}
</style>
